<template>
	<!--我的简报-->
	<div class="report" @click="cancelType">
		<!--删除后弹框-->
		<div class="report-top">
			<div class="report-top-select">
				<div class="report-name">
					<span>简报名称：</span>
					<div>
						<input type="text" @focus="focusName" @blur="blurName" v-model="nameContent"/>
						<p v-if="nameNotice">请输入简报名称</p>
					</div>
				</div>
				<div class="report-type">
					<span>类型：</span>
					<div class="report-type-right">
						<div class="report-type-all" @click="clickType($event)">
							<p :style="typeStyle">{{typeContent}}</p>
							<i></i>
						</div>
						<div class="report-type-select" v-if="isType">
							<ul>
								<li @click="clickSelect($event)">军事</li>
								<li @click="clickSelect($event)">政治</li>
								<li @click="clickSelect($event)">体育</li>
								<li @click="clickSelect($event)">科技</li>
								<li @click="clickSelect($event)">教育</li>
								<li @click="clickSelect($event)">人文</li>
								<li @click="clickSelect($event)">自然</li>
								<li @click="clickSelect($event)">航空</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="report-search">
				<div class="start-time">
				    <span>开始时间：</span>
					<div class="start-time-com">
						<Calendar @calDate="startDate"/>
					</div>
				</div>
				<div class="end-time">
					<span>结束时间：</span>
					<div class="start-time-com">
						<Calendar @calDate="endDate"/>
					</div>
				</div>
				<h5 @click="jbSearch">查询</h5>
				<router-link to="/makeIndex" target="_blank">制作简报</router-link>
			</div>
		</div>
		<div class="report-bottom">
			<div class="report-bottom-title">
				<span><i @click="clickAll" :class="{'selectAll':isSelect}"></i>文件名</span>
				<span>类型</span>
				<span>大小</span>
				<span>创建日期</span>
				<span>下载</span>
				<span>删除</span>
			</div>
			<div class="report-bottom-content" v-for="(item,index) in xunhuan" :key="index">
				<a href="javascript:;" class="jianbao-title"><i :class="{'isSelect':isSelect}" @click="selectOne($event)"></i>简报简报简报简报简报简报简报简简简报{{index}}</a>
				<span class="jianbao-type">军事</span>
				<span class="jianbao-size">30.MB</span>
				<span class="jianbao-time">2017-12-05 14：01:00</span>
				<a href="javascript:;" class="jianbao-download" @click="clickDownload(index)">下载</a>
				<a href="javascript:;" class="jianbao-delete" @click="deleteSelf(index,$event)">删除</a>
			</div>
			<a href="javascript:;" class="deleteAll" @click="clickDelete" >批量删除</a>
		</div>
		<div class="report-paging">
			
		</div>
		<!--删除弹框-->
		<DeleteTitle v-if="isPop" :contentData="popContent" @keepNoteYes="keepNoteYes" @keepNoteNo='keepNoteNo'/>
		<!--开始时间大于结束时间-->
		<DateError v-if="timePan"></DateError>
	</div>
</template>

<script>
  import $ from 'jquery'
  // 引入日历子组件
  import Calendar from '@/components/public/calendar'
  // 引入弹出框(删除)
  import DeleteTitle from '@/components/public/keepNote'
  // 开始时间大于结束时间弹框
  import DateError from '@/components/public/dateError' 
  
  export default {
  	components: {
  	  	Calendar,
  	  	DeleteTitle,
  	  	DateError
  	},
  	data () {
  		return {
  			xunhuan: 5,
  			nameNotice: true, // 是否显示简报名称提示
  			nameContent: '', // 简报名称的内容
  			isType: false, // 类型下拉框是否显示
  			typeContent: '全部', // 类型默认值
  			typeStyle: { // 类型字体颜色
  				color: '#A8B6C8'
  			},
  			isSelect: false, // 文件名是否选上
  			isPop: false, // 删除弹框是否显示
  			popContent: '删除后将无法找回,是否删除',
  			oneIndex: null, // 单个删除，给弹出框传值
  			endValue: null, // 结束时间
  			startValue: null, // 开始时间
  			timePan: false, // 是否弹出时间弹出框
  			isEmpty: [false,false], // 是否清空时间
  		}
  	},
  	methods: {
  		// 简报名称获取焦点
  		focusName () {
  		    var that = this
  		    that.nameNotice = false
  		},
  		// 简报名称失去焦点
  		blurName () {
  			var that = this
  			if (that.nameContent) {
  				that.nameNotice = false
  			} else {
  				that.nameNotice = true
  			}
  		},
  		// 点击类型出现下拉框
  		clickType (e) {
  			var eve = e || window.event
			if(eve.stopPropagation){
				eve.stopPropagation()
			}else{
				eve.cancelBubble = true
			}
  			var that = this
  			that.isType = !that.isType
  		},
  		// 点击全文，取消下拉框
  		cancelType () {
  			var that = this
  			that.isType = false
  		},
  		// 类型选择
  		clickSelect (event) {
  			var that = this
  			that.typeContent = event.target.innerHTML
  			if (that.typeContent === '全部') {
  				that.typeStyle.color = '#A8B6C8'
  			} else {
  				that.typeStyle.color = 'black'
  			}
  		},
  		// 点击文件名选框，全选
  		clickAll () {
  			var that = this
  			that.isSelect = !that.isSelect
  		},
  		// 点击单个文件选中
  		selectOne (event) {
  			var that = this
  			var eve = event.target
  			if (eve.className) {
  				eve.removeAttribute('class')
  			} else {
  				eve.setAttribute('class','isSelect')
  			}
  		},
    	// 下载
    	clickDownload (index) {
    		function downloadFile(url) {   
		        try{ 
		            var elemIF = document.createElement("iframe");   
		            elemIF.src = url;   
		            elemIF.style.display = "none";   
		            document.body.appendChild(elemIF);   
		        }catch(e){ 
		 
		        } 
		    }
    		downloadFile()
    	},
  		// 批量删除
  		clickDelete (event) {
  			var eve = event.target
  			this.isPop = true
  		},
  		// 单个删除
  		deleteSelf (index,e) {
  			var eve = e || window.target
  			this.isPop = true
  			this.oneIndex = index
  		},
  		// 是否删除 ， 是
  		keepNoteYes () {
  			this.isPop = false
  		},
  		// 是否删除 ， 否
  		keepNoteNo () {
  			this.isPop = false
  		},
  		//获取开始事件
  		startDate (val,event) {
  			var  that = this
  		    that.startValue = val
  		    var start = new Date(val).getTime()
  		    var end = new Date(that.endValue).getTime()
  		    if (end) {
  		    	if (start > end) {
  		    		that.timePan = true
  		    		that.isEmpty[0] = true
  		    		setTimeout (function () {
	  		    		that.timePan = false
	  		    	},3000)
  		    	} else {
  		    		that.timePan = false
  		    		that.isEmpty[0] = false
  		    	}
  		    } else {
  		    	that.isEmpty[0] = false
  		    }
  		},
  		// 获取结束时间
  		endDate (val,event) {
  		    var  that = this
  		    that.endValue = val
  		    var start = new Date(that.startValue).getTime()
  		    var end = new Date(val).getTime()
	    	if (start > end) {
  		    	that.timePan = true
  		    	that.isEmpty[1] = true
  		    	setTimeout (function () {
  		    		that.timePan = false
  		    	},2000)
  		    } else {
  		    	that.timePan = false
  		    	that.isEmpty[1] = false
  		    }
  		},
  		// 查询简报
  		jbSearch () {
  			var that = this
  			var iet = that.isEmpty
  			if (!iet[0] && !iet[1]) {
  			    that.timePan = false	
  			} else {
  				that.timePan = true
  				setTimeout (function () {
  		    		that.timePan = false
  		    	},2000)
  			}
  		}
  	}
  }
</script>

<style scoped>
	@import "../../../../../static/knowChilde/report.css";
</style>